<template>
  <div>
    <el-container>
      <el-header>
        <table>
          <tr>
            <th>收支&nbsp&nbsp</th>
            <td>
              <el-select v-model="selectValue" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.selectValue"
                  :label="item.label"
                  :value="item.selectValue">
                </el-option>
              </el-select>
            </td>
            <th>&nbsp&nbsp金额区间&nbsp&nbsp</th>
            <td>
              <el-input-number v-model="num9" :precision="2" :step="0.1"
                               :max="200000"></el-input-number>

              <el-input-number v-model="num10" :precision="2" :step="0.1"
                               :max="200000"></el-input-number>
            </td>
            <th>&nbsp&nbsp日期&nbsp&nbsp</th>
            <td>
              <div class="block">
                <el-date-picker
                  v-model="value6"
                  type="date"
                  placeholder="开始日期">
                </el-date-picker>
              </div>
            </td>
            <td>
              <div class="block">
                <el-date-picker
                  v-model="value7"
                  type="date"
                  placeholder="截止日期">
                </el-date-picker>
              </div>
            </td>
          </tr>
        </table>
      </el-header>
      <el-main>
        <div>
          <table>
            <tr>
              <th>数据列表&nbsp&nbsp&nbsp&nbsp</th>
              <th>收入金额:</th>
              <td>
                <el-input v-model="summoney.inmoney"></el-input>
              </td>
              <th>支出金额:</th>
              <td>
                <el-input v-model="summoney.outmoney"></el-input>
              </td>
              <th>余额:</th>
              <td>
                <el-input v-model="summoney.balance"></el-input>
              </td>
              <th>&nbsp&nbsp
                <el-button type="success" @click="accountList()" round>筛选</el-button>
                &nbsp&nbsp
              </th>
              <th>&nbsp&nbsp
                <el-button type="success" @click="dialogdata.dialogVisible = true" round>记一笔</el-button>
              </th>
            </tr>
          </table>
        </div>
        <div id="datagrid">
          <el-table align="center"
                    :data="tableData"
                    style="width: 100%">
            <el-table-column
              prop="inoutName"
              label="收支"
              width="180">
            </el-table-column>
            <el-table-column
              prop="username"
              label="姓名"
              width="180">
            </el-table-column>
            <el-table-column
              prop="money"
              label="金额"
              width="180">
            </el-table-column>
            <el-table-column
              prop="recordTime"
              label="日期"
              width="180">
            </el-table-column>
            <el-table-column
              prop="remark"
              label="用途">
            </el-table-column>
          </el-table>
        </div>
        <!--<div>
          <el-pagination
            background
            layout="prev, pager, next"
            :total="pagetotal">
          </el-pagination>
        </div>-->
      </el-main>
      <div>
        <el-dialog
          title="新增账单"
          :before-close="handleClose"
          :visible.sync="dialogdata.dialogVisible"
          width="30%">
          <el-form :model="dialogdata">
            <el-form-item label="收支" :label-width="dialogdata.formLabelWidth">
              <el-select size="medium" v-model="addValue" placeholder="请选择">
                <el-option
                  v-for="item in addAccount"
                  :key="item.addValue"
                  :label="item.label"
                  :value="item.addValue">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="金额" :label-width="dialogdata.formLabelWidth">
              <el-input-number size="medium" v-model="dialogdata.money" :precision="2" :step="0.1"
                               :max="200000"></el-input-number>
            </el-form-item>
            <el-form-item label="用途" :label-width="dialogdata.formLabelWidth">
              <el-input type="textarea" v-model="dialogdata.remark" auto-complete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <!--<el-button @click="dialogdata.dialogVisible = false">取 消</el-button>-->
            <el-button @click="canceAccount()">取 消</el-button>
            <el-button type="primary" @click="saveAccount()">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </el-container>
  </div>


</template>

<style>
  .datapick {
    margin-top: 30px;
    margin-bottom: 20px;
  }

</style>

<script>
  //  import router from '../router'

  export default {
    name: 'AccountList',

    data() {
      return {
        dialogdata: {
          dialogVisible: false,
          formLabelWidth: false,
          money: 0,
          remark: ''
        },
        addAccount: [
          {
            addValue: '',
            label: '请选择收支'
          }, {
            addValue: '0',
            label: '收入'
          }, {
            addValue: '1',
            label: '支出'
          }],
        addValue: '',
        summoney: {
          inmoney: 0,
          outmoney: 0,
          balance: 0
        },
        tableData: this.accountList(),
        pagetotal: 12,
        value6: '',
        value7: '',
        mytime: {},
        num9: 0,
        num10: 0,
        options: [
          {
            selectValue: '',
            label: '请选择收支'
          }, {
            selectValue: '0',
            label: '收入'
          }, {
            selectValue: '1',
            label: '支出'
          }],
        selectValue: ''
      }
    },
    methods: {
      accountList: function () {
        let postparam = {
          inoutCode: this.selectValue,
          startmoney: this.num9,
          endmoney: this.num10,
          starttime: this.value6,
          endtime: this.value7
        }
        let config = {
          method: "post",
          url: '/static/data.json',
//          url: '/api/getAccountList',获取后端接口数据 api查看config/index.js 中的代理 proxyTable
          data: JSON.stringify(postparam),
          headers: {
            'Content-type': 'application/json; charset=utf-8'
          }
        }
        this.axios(config).then((response) => {
          this.tableData = response.data;
          this.pagetotal = this.tableData.length;
          let inmoney = 0;
          let outmoney = 0;
          for (let obj of response.data) {
            if (obj.inoutCode === '0') {
              inmoney += obj.money;
            }
            if (obj.inoutCode === '1') {
              outmoney += obj.money;
            }
          }
          let balance = inmoney - outmoney;
          this.summoney.inmoney = inmoney;
          this.summoney.outmoney = outmoney;
          this.summoney.balance = balance;
        }).catch(function (error) {
          console.log(error);
        });
      },
      saveAccount: function () {
        console.log(this.addAccount)
        let param = {
          "inoutCode": this.addValue,
          "money": this.dialogdata.money,
          "remark": this.dialogdata.remark
        }
        let config = {
          method: "post",
          url: '/api/saveAccount',
          data: JSON.stringify(param),
          headers: {
            'Content-type': 'application/json; charset=utf-8'
          }
        }
        this.axios(config).then((response) => {
            alert("保存成功!");
            this.cance();
            this.accountList();
          }
        ).catch(function (error) {
          alert("保存失败!");
          this.cance();
          console.log(error);
        });
      },
      canceAccount() {
        this.cance();
      },
      cance() {
        //清除dialog数据
        this.dialogdata.dialogVisible = false
        this.addValue = '';
        this.dialogdata.money = 0;
        this.dialogdata.remark = '';
      },
      handleClose(done) {
        done();
        this.addValue = '';
        this.dialogdata.money = 0;
        this.dialogdata.remark = '';
      }

    },
    //计算
    computed: {}
    ,
    //监听
    watch: {}
    ,
  }
</script>
